<@content for="title">Book List</@content>
<table class="bookList">
    <tr>
        <td style="font-weight: bold">Book name</td>
        <td style="font-weight: bold">Book author</td>
        <td style="font-weight: bold">number of page</td>
        <td style="font-weight: bold">book format</td>
    </tr>
    <@form controller="books" action="deleteBooks" method="post" id="delete">

    <@render partial="element" collection=elements />
    <input type="submit" value="" class="deleteButton"/>

    <div id="confirmationDialog" title="Empty the recycle bin?">
        <p><span style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>

    <div id="messageDialog" title="Empty">
        <p><span style="float:left; margin:0 7px 20px 0;"></span>No items are selected</p>
    </div>

    </@>
    <tr class="errorMessages" style="display: none">
        <td id="errorBookName"></td>
        <td id="errorBookAuthor"></td>
        <td id="errorBookPages"></td>
        <td id="errorBookFormat"></td>
    </tr>
    <tr class="newBookForm" style="display: none">
        <@form controller="books" action="newBook" method="post" id="${genreCode}" class="addBookFrom">
        <td><input id="bookName" name="name" type="text"></td>
        <td><input id="bookAuthor" name="author" type="text"></td>
        <td><input id="bookPages" name="numberOfPage" type="text"></td>
        <td><input id="bookFormat" name="format" type="text"></td>
        <input type="submit" value="" class="addButton"/>
        </@>
    </tr>
</table>
<div class="newBookLink"><img src="../pictures/add_icon.jpg"></div>

